<template>
  <div id="dept">
    <div style="height:24px;overflow:hidden;float:right;padding-top:8px;font-size:var(--size14) !important;font-family:'宋体'">
      <i class="el-icon-success" style="color:#090" v-if="updateLogText.Status==='ok'"></i>
      <i class="el-icon-error" style="color:#f00" v-if="updateLogText.Status==='error'"></i>
       {{updateLogText.Message}}
    </div>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item>基础信息</el-breadcrumb-item>
      <el-breadcrumb-item><b>机构编制</b></el-breadcrumb-item>
    </el-breadcrumb>
    <div id="tree" v-show="treeShow">
      <el-scrollbar style="height: calc(100% + 16px);">
        <el-input placeholder="输入关键字" v-model="filterText" class="treeinput" @keyup.enter.native="searchdept"></el-input>
        <el-tooltip class="item" effect="dark" content="搜索" placement="top">
          <el-button type="primary" icon="el-icon-search" class="depttreebtn" @click="searchdept" style="margin-right:5px !important "></el-button>
        </el-tooltip>
        <el-tooltip class="item" content="全部" placement="top">
        <el-button type="success" icon="el-icon-s-platform" class="depttreebtn" @click="getChild(-1)" style="margin-right:0 !important "></el-button>
        </el-tooltip>
        <el-tree style="clear:both" accordion node-key="id" @current-change="testf" @node-click="handleNodeClick" :expand-on-click-node="false" :render-content="renderContent" class="filter-tree" :data="treedata" :filter-node-method="filterNode" ref="tree2" :empty-text="searchingtext" lazy :load="loadNode1" :default-expanded-keys="defaultkey" :props="myprops"></el-tree>
      </el-scrollbar>
    </div>
    <div id="treebtn" @click="showtree()" :class="btnStyle"></div>
    <div id="deptdetail" :style="detailStyle">
      <DeptDetail v-bind:mydeptid='mydeptid' v-on:treefreshevent="treefresh" v-on:treefreshnameevent="treefreshname"></DeptDetail>
    </div>
  </div>
</template>
<script>
// import * as types from './store/types'
import DeptDetail from '@/dept/Detail.vue'
export default {
  components: {
    DeptDetail
  },
  data () {
    return {
      myprops: {
        isLeaf: 'isLeaf'
      },
      mydeptid: '',
      treeVisible: true,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      treeShow: true,
      value1: true,
      filterText: '',
      treedata: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      mydeptnode: {},
      TreeLoading: false,
      detailStyle: {
        margin: '0 0 0 280px',
        width: 'calc(100% - 290px)'
      },
      btnStyle: 'treebtn',
      childdata: [],
      defaultkey: [],
      updateLogText: {},
      searchingtext: '正在加载...'
    }
  },

  methods: {
    searchdept () {
      var keyword = this.filterText
      if (keyword === '') {
        this.$message({
          message: '关键词不能为空',
          type: 'error'
        })
      } else {
        var _this = this
        this.TreeLoading = true
        this.searchingtext = '正在加载...'
        this.$http
          .get(`/binfo/ins/search/` + keyword)
          .then(function (response) {
            _this.TreeLoading = false
            console.log(response.data)
            if (response.data.length === 0) {
              _this.searchingtext = '无结果'
            }
            _this.treedata = response.data
            console.log(_this.treedata)
          })
          .catch(function (error) {
            console.log(error)
            _this.$message({
              message: '网络获取失败:' + error,
              type: 'error'
            })
          })
      }
    },
    loadNode1 (node, resolve) {
      if (node.level === 0) {
        this.getChild(-1, resolve)
      } else {
        this.getChild(node.data.id, resolve)
      }
    },
    getChild (id, resolve) {
      console.log('重新获取树')
      console.log(this.childdata)
      var _this = this
      this.TreeLoading = true
      this.$http
        .get(`/binfo/ins/` + id + '/false')
        .then(function (response) {
          _this.TreeLoading = false
          console.log('获取成功111')
          console.log(response.data)
          _this.childdata = response.data
          console.log(_this.childdata)
          if (id === -1 && response.data.length > 0) {
            _this.treedata = response.data
            _this.defaultkey.push(response.data[0].id)
            _this.filterText = ''
          } else {
            resolve(_this.childdata)
          }
        })
        .catch(function (error) {
          console.log(error)
          _this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    showtree () {
      if (this.treeShow) {
        this.treeShow = false
        this.detailStyle.margin = '0 0 0 10px'
        this.detailStyle.width = 'calc(100% - 20px)'
        this.btnStyle = 'treebtn1'
      } else {
        this.treeShow = true
        this.detailStyle.margin = '0 0 0 280px'
        this.detailStyle.width = 'calc(100% - 290px)'
        this.btnStyle = 'treebtn'
      }
    },
    TreeBtnsShow () {
      console.log(this.treeVisible)
      this.treeBtnsVisible = this.treeVisible
    },
    editshow () {
      console.log(this.value1)
    },
    testf: function () {
      if (this.$refs.tree2.getCurrentNode()['id'] !== '0') {
        console.log('监听' + this.$refs.tree2.getCurrentNode()['id'])
        console.log('监听2' + this.$refs.tree2.getCurrentNode()['label'])
        this.mydeptid = this.$refs.tree2.getCurrentNode()['id']
        this.mydeptnode = this.$refs.tree2.getCurrentNode()
      // this.$router.push({path: `/dept/Detail/${this.$refs.tree2.getCurrentNode()['id']}`})
      }
    },
    handleNodeClick (data) {
      console.log(data)
      console.log(this.$refs.tree2.getCurrentKey())
      console.log(this.$refs.tree2.getCurrentNode()['label'])
    },
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    renderContent (h, { node, data, store }) {
      console.log('测试：' + this.value1)
      return (
        <span class="custom-tree-node" style="width:100%" title={data.title} >
          <i class={data.className} />
          <span style="line-height:28px">{node.label}</span>
        </span>
      )
    },
    treefresh (data) {
      this.mydeptnode.children = data
    },
    treefreshname (data) {
      this.mydeptnode.label = data
      this.mydeptnode.title = data
    },
    getUpdatelog () {
      var _this = this
      this.$http
        .get('/dlog/status')
        .then(function (response) {
          _this.updateLogText = response.data
        })
        .catch(function (error) {
          _this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    }
  },
  mounted () {
    this.getUpdatelog()
  }
}
</script>
<style>
#tree i{
  padding-right:5px;
}
i.duiwu1{
  color:#ffc500 !important;
}
i.duiwu2{
  color:#1296db !important;
}
i.duiwu3{
  color:#6fb400 !important;
}
#tree {
  width: 260px !important;
  border:1px solid #95B8E7;
  height: calc(100% - 140px);
  background: #fff !important;
  padding-top:0;
  padding-right:0;
  margin-top:0;
  margin-left:10px;
  overflow: hidden;
  float: left;
  position: fixed;
}
.treebtn{
  background:url(./assets/hidetree.png) no-repeat;
  left:273px;
  width:7px;
  height:28px;
  position:fixed;
  top: calc(50%);
  cursor: pointer;
}
.treebtn1{
  background:url(./assets/showtree.png) no-repeat;
  left:3px;
  width:7px;
  height:28px;
  position:fixed;
  top: calc(50%);
  cursor: pointer;
}
#deptdetail{
  background: #fff;
  border:1px solid #95B8E7;
  height: calc(100% - 140px);
  float: left;
  position: fixed;
  padding:0 !important;
}
.el-tree{
  background: #fff;
}
.custom-tree-node {
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
#editswitch{
  margin: 15px;
  text-align: right;
  line-height: 20px;
  font-size: 14px;
}
.treeinput{
  margin: 10px;
  width: 136px !important;
  float:left
}
.deptbuttons{
  float:right;
}
.depttreebtn{
  float: left;
  margin:10px 10px 0 0 !important;
}
.depttreebtn{
  padding: 12px 8px 12px 13px !important;
}
#dept .el-breadcrumb{
  padding-bottom:4px;
}
</style>
